<template>
  <div>
    <page-header title="店铺管理">
      <n-button type="primary" @click.stop="handleShowModal">新增</n-button>
    </page-header>
    <div class="mt-[16px]">
      <n-space vertical>
        <n-card size="small" v-for="branch in branchesList" :key="branch.id">
          <template #header>
            <div class="flex items-center">
              <div class="bg-theme-main-color flex items-center p-2 rounded-md">
                <n-icon size="32" color="#ffffff">
                  <StorefrontSharp />
                </n-icon>
              </div>
              <div class="ml-2">
                <div>
                  <div class="text-base">{{ branch.name }}</div>
                </div>
                <div>
                  <span class="mr-2 text-sm">
                    {{ branchyType(branch.branchType) }}
                  </span>
                  <n-tag
                    :bordered="false"
                    :type="branch.status === 'available' ? 'info' : 'error'"
                    size="small"
                  >
                    {{ branch.status === "available" ? "有效" : "无效" }}
                  </n-tag>
                </div>
              </div>
            </div>
          </template>
          <template #header-extra>
            <div>
              <n-button strong secondary size="small" type="success">
                <template #icon>
                  <n-icon><CreateOutline /></n-icon>
                </template>
              </n-button>
              <n-button strong secondary size="small" type="error" class="ml-2">
                <template #icon>
                  <n-icon><Trash /></n-icon>
                </template>
              </n-button>
            </div>
          </template>
          <div class="text-sm">
            <div class="flex">
              <div class="flex-1">
                店长：<span>{{ branch.managerName || "/" }}</span>
              </div>
              <div class="flex-1 mt-1">
                交易缺省客户：
                <span>{{ branch.walkinCustomerName || "/" }}</span>
              </div>
            </div>
            <div class="flex">
              <div>地址：</div>
              <div>{{ getBranchAddress(branch) }}</div>
            </div>
          </div>
        </n-card>
      </n-space>
    </div>
    <BranchModal
      width="720px"
      title="新增店铺"
      v-model:show="modalShowFlag"
      :action-type="actionType"
      @close="handleHideModal"
      @cancel="handleHideModal"
    />
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { get } from "lodash-es";
import { CreateOutline, StorefrontSharp, Trash } from "@vicons/ionicons5";
import BranchModal from "@/components/biz/branchModal/index.vue";
import { useBranchModal } from "@/components/biz/branchModal/hooks";
import { getAllBranches } from "@/api/branches/branches.api";
import { DictStorage } from "@/storage/dict.storage";
const BRANCH_TYPE_LIST = DictStorage.getDictItemsByCode("pos_branch_type");

const { actionType, modalShowFlag, handleShowModal, handleHideModal } =
  useBranchModal();

const branchesList = ref<any[]>([]);

const branchyType = (value: string) => {
  let name = "";
  if (value) {
    const targetDict = BRANCH_TYPE_LIST.find(
      (item: any) => item.value === value
    );
    name = targetDict?.label || "";
  }
  return name;
};

const getBranchAddress = (payload: any) => {
  const { province, city, district, address, postCode } = payload;
  return `${province} ${city} ${district} ${address}， ${postCode}`;
};

const handleGetBranchList = async () => {
  const res = await getAllBranches();
  console.log(res);
  branchesList.value = get(res, "result") || [];
};

onMounted(() => {
  handleGetBranchList();
});
</script>
